<style scoped src="./s-input.style.css"></style>
<template>
    <div class="input-box">
        <div 
            class="input-common input-body" 
            :class="[isWritting ? 'writting' : '', circle ? 'circle':'']" 
            @focusin="toggleWritting(true)" 
            @focusout="toggleWritting(false)"
        >
            <input 
                v-model="value"
                class="common"
                :type="type" 
                :style="Style" 
                :class="[inputClassName, circle ? 'circle':'']"
                :placeholder="placeholder"
                @keyup.enter="submit()"
            >
            <button
                class="input-btn"
                :class="[circle ? 'circle-btn':'']"
                v-show="type === 'search'"
                @click.stop="submit()"
            >
                <s-icon-vue class="icon-search3" fontSize="12px" :color="isWritting ? '#fff':''"></s-icon-vue>
            </button>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, defineProps, defineEmits} from 'vue';
import sIconVue from '../s-icon/s-icon.vue';
const props = defineProps({
    type: {
        type: String,
        default: "text"
    },
    circle: Boolean,
    Style: String,
    placeholder: String
})

const value = ref('');
const inputClassName = ref('text');
const isWritting = ref(false);
const toggleWritting = (value) => {
    isWritting.value = value;
}

const emits = defineEmits(['submit']);
const submit = () => {
    console.log(value.value);
    emits("submit", value.value);
    return value;
}

</script>

